<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程表</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type='text/javascript' src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type='text/javascript' src='../js/libs/sui/sm.js' charset='utf-8'></script>
    <script type='text/javascript' src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>
    <script src="../js/libs/juicer-min.js"></script>
    <script src="../js/libs/jquery.md5.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<!-- 这里是页面内容区 -->
<div class="content native-scroll bg-white p-t22">
    <!--课程表-->
    <div class="class-table">
        <div class="head-no-toolbar bg-self-green">
            <span class="icon iconfont c-white p-l" onclick="javascript:api.closeWin();">&#xe61f;</span>
            <span class="c-white t-center">课程表</span>
            <span></span>
        </div>
        <div class="content-padded">
            <!--最新资讯-->
            <div class="content-block-title f-normal m-b-0 title1 c-default overflowAuto">
                <a id="table-name" style="padding-top: 1px;">培训课程:无</a>
            </div>
            <div class="content-block-title m-t-0 title2">
                上课地点：<a id="district-name">无</a>
            </div>

            <!--内容列表-->

            <div id="class-time">
                <!--
               <div class="con first-con">
                   <div class="date">07-22</div>
                   <div class="time-address">
                       <div class="item c-white">
                           <div class="item-real">
                               <p>09:00-10:00</p>
                               <p>博学楼603教室</p>
                           </div>
                       </div>
                       <div class="item c-white">
                           <div class="item-real">
                               <p>09:00-10:00</p>
                               <p>博学楼603教室</p>
                           </div>
                       </div>
                       <div class="item c-white">
                           <div class="item-real">
                               <p>09:00-10:00</p>
                               <p>博学楼603教室</p>
                           </div>
                       </div>
                       <div class="item c-white">
                           <div class="item-real">
                               <p>09:00-10:00</p>
                               <p>博学楼603教室</p>
                           </div>
                       </div>
                   </div>
                </div>
                   -->

                <!--
               <div class="con">
                   <div class="date">07-23</div>
                   <div class="time-address">
                       <div class="item c-white">
                           <div class="item-real">
                               <p>09:00-10:00</p>
                               <p>博学楼603教室</p>
                           </div>
                       </div>
                       <div class="item c-white">
                           <div class="item-real">
                               <p>09:00-10:00</p>
                               <p>博学楼603教室</p>
                           </div>
                       </div>
                       <div class="item c-white">
                           <div class="item-real">
                               <p>09:00-10:00</p>
                               <p>博学楼603教室</p>
                           </div>
                       </div>
                   </div>
               </div>
               -->
            </div>
        </div>
    </div>
</div>
<script id="table-tpl" type="text/template">
    {@each dateList as it,index}
    <div class="con first-con">
        {@if it.class_time!=null&&it.class_time!=""}
        <div class="date">&{it.class_time}</div>
        {@/if}
        <div class="time-address">
            {@each it.times as time,index}
            <div class="item c-white">
                <div class="item-real">
                    {@if (time.BEGIN_TIME!=null&&time.BEGIN_TIME!="")&&(time.END_TIME!=null&&time.END_TIME!=")}
                    <p>&{time.BEGIN_TIME}-&{time.END_TIME}</p>
                    {@/if}
                    {@if (time.CLASS_ROOM_NAME!=null)&&(time.CLASS_ROOM_NAME!="")}
                    <p>&{time.CLASS_ROOM_NAME}</p>
                    {@/if}
                </div>
            </div>
            {@/each}
        </div>
    </div>
    {@/each}
</script>

<script>
    apiready = function () {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

        var tableId = api.pageParam.tableId;
        var tableName = api.pageParam.tableName;

        if (isNotNull(tableId)) {

            if (isNotNull(tableName)) {
                $("#table-name").text(tableName);
            }
        }
        var sql = "SELECT " +
                "s1.SCHEDULE_ID," +
                "s1.CLASS_ID," +
                "DATE_FORMAT(s1.CLASS_TIME,'%m-%d') CLASS_TIME," +
                "s2.TIME_NAME," +
                "s2.BEGIN_TIME," +
                "s2.END_TIME," +
                "s3.CLASS_ROOM_NAME," +
                "s4.DISTRICT_NAME" +
                " FROM " +
                "b_schedule s1," +
                "e_time_interval s2," +
                "e_class_room s3," +
                "b_district s4" +
                " WHERE " +
                "CLASS_ID = '{0}'" +
                " AND s1.TIME_ID = s2.TIME_ID" +
                " AND s1.CLASS_ADDR = s3.CLASS_ROOM_ID" +
                " AND s3.DISTRICT_ID = s4.DISTRICT_ID";
        dbQuery(1, 10, sql.format(tableId), true, function (ret, err) {

            if (isObject(ret)&&ret.statusCode == 0) {
                if(ret.result.length>0){
                    if(isNotEmpty(ret.result[0].DISTRICT_NAME)){
                        $("#district-name").text(ret.result[0].DISTRICT_NAME);
                    }

                    //按上课日期分组
                    var map={};
                    var dest=[];
                    for(var i=0;i<ret.result.length;i++){
                        var res=ret.result[i];
                        if(!map[res.CLASS_TIME]){
                            dest.push({
                                class_time:res.CLASS_TIME,
                                times:[res]
                            });
                            map[res.CLASS_TIME]=res;
                        }else{
                            for(var j=0;j<dest.length;j++){
                                var dres=dest[j];
                                if(res.CLASS_TIME==dres.class_time){
                                    dres.times.push(res);
                                    break;
                                }
                            }
                        }
                    }
                    var classData={dateList:dest};
                    var tableTpl = document.getElementById("table-tpl").innerHTML;
                    var tableHtml = juicer(tableTpl, classData);
                    $("#class-time").html(tableHtml);
                }else{

                    toast("暂无课程表数据");
                }
            }

        });

    };
</script>
</body>
</html>
